<template>
  <div class="sidebar" :class="{ collapsed: isCollapse }">
    <div class="logo-container">
      <img src="../assets/vue.svg" alt="Logo" class="logo" />
      <span class="title" v-show="!isCollapse">告警管理系统</span>
    </div>

    <el-menu
      :default-active="activeSection"
      class="sidebar-menu"
      :collapse="isCollapse"
      background-color="#001529"
      text-color="#fff"
      active-text-color="#409EFF"
      @select="handleSelect"
    >
      
      <el-menu-item index="management">
        <el-icon><Warning /></el-icon>
        <template #title>告警管理</template>
      </el-menu-item>
      
      <el-menu-item index="attack-path">
        <el-icon><Connection /></el-icon>
        <template #title>攻击路径图谱</template>
      </el-menu-item>
      
      
    </el-menu>

    <div class="sidebar-footer">
      <div class="collapse-btn" @click="handleCollapse">
        <el-icon v-if="!isCollapse"><DArrowLeft /></el-icon>
        <el-icon v-else><DArrowRight /></el-icon>
      </div>
      
      <el-dropdown class="user-dropdown" trigger="click">
        <div class="user-info" :class="{ 'collapsed-user': isCollapse }">
          <el-avatar :size="32" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
          <span v-show="!isCollapse" class="username">Admin</span>
          <el-icon v-show="!isCollapse"><CaretBottom /></el-icon>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <el-icon><User /></el-icon>个人信息
            </el-dropdown-item>
            <el-dropdown-item>
              <el-icon><SwitchButton /></el-icon>切换账号
            </el-dropdown-item>
            <el-dropdown-item divided>
              <el-icon><SwitchButton /></el-icon>退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const props = defineProps({
  isCollapse: {
    type: Boolean,
    default: false
  },
  activeSection: {
    type: String,
    default: 'overview'
  }
})

const emit = defineEmits(['collapse', 'select'])
const router = useRouter()

const handleCollapse = () => {
  emit('collapse', !props.isCollapse)
}

const handleSelect = (key: string) => {
  emit('select', key)
  if (key === 'management') {
    router.push('/alarm-management')
  } else if (key === 'attack-path') {
    router.push('/attack-path')
  }
}
</script>

<style scoped lang="scss">
.sidebar {
  height: 100vh;
  width: 240px;
  background-color: #001529;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  z-index: 1000;

  &.collapsed {
    width: 64px;

    .logo-container {
      padding: 16px 20px;
      justify-content: center;

      .title {
        display: none;
      }
    }
  }

  .logo-container {
    height: 60px;
    padding: 16px;
    display: flex;
    align-items: center;
    color: #fff;
    transition: all 0.3s ease;
    overflow: hidden;

    .logo {
      height: 32px;
      margin-right: 12px;
      flex-shrink: 0;
    }

    .title {
      font-size: 18px;
      font-weight: bold;
      white-space: nowrap;
      transition: opacity 0.3s;
    }
  }

  .sidebar-menu {
    flex: 1;
    border: none;
    overflow-x: hidden;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 6px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 3px;
    }

    :deep(.el-menu-item), :deep(.el-sub-menu__title) {
      height: 50px;
      line-height: 50px;

      .el-icon {
        font-size: 18px;
      }
    }
  }

  .sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 16px;

    .collapse-btn {
      text-align: center;
      color: #fff;
      cursor: pointer;
      margin-bottom: 16px;
      
      &:hover {
        color: #409EFF;
      }

      .el-icon {
        font-size: 20px;
      }
    }

    .user-dropdown {
      width: 100%;
    }

    .user-info {
      display: flex;
      align-items: center;
      color: #fff;
      cursor: pointer;
      padding: 8px;
      border-radius: 4px;
      transition: all 0.3s;

      &:hover {
        background: rgba(255, 255, 255, 0.1);
      }

      &.collapsed-user {
        justify-content: center;
      }

      .username {
        margin: 0 8px;
        font-size: 14px;
      }

      .el-icon {
        font-size: 12px;
      }
    }
  }
}

:deep(.el-menu--vertical) {
  .el-menu-item, .el-sub-menu__title {
    color: #fff;
    
    &:hover {
      background-color: rgba(255, 255, 255, 0.1) !important;
    }
  }
}

:deep(.el-menu) {
  border-right: none;
}
</style> 